<script setup lang="ts">
/**/
import {reactive, watch} from "vue";
import {useRouter,useRoute} from "vue-router";

let navigations = reactive([
  { label: '全部', selected: true },
  { label: '宝鸡东站2023年职工教育培训计划', selected: false },
  { label: '宝鸡东站2023年新工岗前培训计划', selected: false },
  { label: '宝鸡东站2024年夏季防洪职工应知应会培训计划', selected: false },
  { label: '宝鸡东站关于开展 “查隐患、补短板”行车', selected: false },
  { label: '特殊设备专项培训计划', selected: false },
  { label: '宝鸡东站2024年夏季防洪职工应知应会培训计划', selected: false },
  { label: '宝鸡东站2023年职工教育培训计划', selected: false },
])

const route = useRoute();
const router = useRouter();

const fetchData = (query: any) => {
  // 根据路由参数执行你的逻辑，例如获取数据
  if (query.leftMenuIndex) {
    const leftMenuIndex = Array.isArray(query.leftMenuIndex) ? query.leftMenuIndex[0] : query.leftMenuIndex;
    clickHandler(leftMenuIndex,false);
  } else {
    console.error('mainTopIndexNavigation 没进来');
  }
};

// function initTopMenu(indexLocal:number){
//   if(indexLocal==props.index){
//     selected.value=true;
//   }
// }

// 立即执行一次 fetchData，并监听 route.query 的变化
watch(() => route.query, fetchData, { immediate: true });

function clickHandler(index:number, upRoute:boolean){
  navigations.forEach((e)=>e.selected=false)
  navigations[index].selected = true;
  if(upRoute){
    updateRoute(index);
  }
}

const updateRoute = (index:number) => {
  router.push({
    path: route.path,
    query: {
      ...route.query,
      leftMenuIndex: index,
    },
  });
};


</script>

<template>
  <div style="display: flex;flex-direction: column">
    <div v-for="(element,index) in navigations" :key="index" @click="clickHandler(index,true)" class="normalStyle" :class="{'selectedStyle':element.selected}">
      <el-row style="align-items: center">
        <div v-show="element.selected" class="lineStyle"></div>
        <el-text line-clamp="2" style="width: 200px;margin: 10px;">
          {{element.label}}
        </el-text>
      </el-row>
    </div>
  </div>
</template>

<style scoped>
.el-row{
  flex-wrap:nowrap;
}

.lineStyle{
  width: 4px;
  height: 36px;
  background: #3C8DF9;
  border-radius: 0px 2px 2px 0px;
}

.normalStyle{
  gap: 10px;
  border-radius:  6px 0px 0px 6px;
  border: 1px solid #7FB2F5;
  align-items: center;
  background:#CBE9FF;
  cursor: pointer;/*鼠标移动上去是手型*/
  text-align: left;
  height: 90px;
  justify-content: center;
  display: flex;
}

.selectedStyle{
  border-right: none;     /* 去除右边边框 */
  background-color: white;
  text-align: left;
}


.main{
  background: chartreuse;
  justify-content: center;
  display: flex;
  flex-direction: row;
}
</style>